<template>
    <div>
        <h1>Somp - {{ money }} - {{ car }}</h1>
        <button @click="handleClick">改钱</button>
        <h2>子组件 {{ person }}</h2>
        <h1>{{ counterStore.count }}</h1>
        <button @click="counterStore.add(100, '真帅')">add 100</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type {Person} from '../types/user'
import { useCounterStore } from '../store/counter';

// 可选属性 如何配置默认值
const props = withDefaults(defineProps<{
    money: number
    car?: string
}>(), {
    car: '小车车'
})
console.log('123', props.money);
// const {money, car = '宝马车'} = defineProps<{
//     money: number
//     car?: string
// }>()

const emit = defineEmits<{
    (e: 'changeMoney', val: number): void
}>()

const counterStore = useCounterStore()

const handleClick = () => {
    // this.$emit('')
    emit('changeMoney', props.money + 10)
}
const person = ref<Person>({
    name: 'ls',
    age: 20
})
</script>

<style scoped>

</style>